<?php
$this->headLink()->appendStylesheet($this->baseUrl() . '/public/styles/datepicker/jquery.datepick.css');
$this->headScript()->prependFile($this->baseUrl() . '/public/scripts/datepicker/jquery.datepick.js');
?>
<script>
    var aStatus = Array();
        aStatus[0] = 'Pendiente';
        aStatus[1] = 'En Progreso';
        aStatus[5] = 'Completados';
    
    google.load('visualization', '1.0', {
        'packages':['corechart','table']
    });

    google.setOnLoadCallback(drawVisualization);
    
    function drawVisualization() {
        var jsonData = $.ajax({
            url: "<?php echo $this->baseUrl() ?>/report/report/get-report",
            dataType:"json",
            async: false
        }).responseText;
        var dataParse = jQuery.parseJSON(jsonData);
        var data = [
            ['', aStatus[parseInt(dataParse[0].status)], aStatus[parseInt(dataParse[1].status)], aStatus[parseInt(dataParse[2].status)]],
            ['', parseInt(dataParse[0].nro_ordenes), parseInt(dataParse[1].nro_ordenes), parseInt(dataParse[2].nro_ordenes)]
        ];
        var wrapper = new google.visualization.ChartWrapper({
            chartType: 'ColumnChart',
            dataTable: data,
            options: {'title': 'Estado de las Ordenes','width':400},
            containerId: 'chart_div'
        }); 
        wrapper.draw();
        
        //Table data
        dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Estado Ordenes');
        dataTable.addColumn('number', 'Total de ordenes');
       
        dataTable.addRows([
            [aStatus[parseInt(dataParse[0].status)],  parseInt(dataParse[0].nro_ordenes)],
            [aStatus[parseInt(dataParse[1].status)],   parseInt(dataParse[1].nro_ordenes)],
            [aStatus[parseInt(dataParse[2].status)], parseInt(dataParse[2].nro_ordenes)]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(dataTable, {showRowNumber: true});
    }

    $(document).ready(function() {    
        // report custom
        $('#formreport').ajaxForm({
            url: "<?php echo $this->baseUrl() ?>/report/report/get-report-custom",
            type: 'get',
            dataType: 'json',
            beforeSubmit: function() {
                $('#formreport').validate({
                    rules: {
                        from_date:	'required',
                        to_date:	'required'
                    }, messages: {
                        from_date:	'',
                        to_date:	''
                    }
                });
                return $('#formreport').valid();
            },
            success: function(resp) {
                
                google.setOnLoadCallback(drawChartCustom(resp));
                function drawChartCustom(resp){
                    dataTable = new google.visualization.DataTable();
                    dataTable.addColumn('string', 'Estado Ordenes');
                    dataTable.addColumn('number', 'Total de ordenes');
                    
                    if(resp[0].status != null){
                        if(parseInt(resp[0].status) == 0){
                            var data = [
                                ['', 'Pendientes'],
                                ['', parseInt(resp[0].nro_ordenes)]
                            ];
                            //Table data
                            dataTable.addRows([
                                ['Pendientes',  parseInt(resp[0].nro_ordenes)]
                            ]);
                        }
                        if(parseInt(resp[0].status) == 1){
                            var data = [
                                ['', 'En Progreso'],
                                ['', parseInt(resp[0].nro_ordenes)]
                            ];
                            dataTable.addRows([
                                ['En Progreso',  parseInt(resp[0].nro_ordenes)]
                            ]);
                        }
                        if(parseInt(resp[0].status) == 5){
                            var data = [
                                ['', 'Completados'],
                                ['', parseInt(resp[0].nro_ordenes)]
                            ];
                            dataTable.addRows([
                                ['Completados',  parseInt(resp[0].nro_ordenes)]
                            ]);
                        }
                        var wrapper = new google.visualization.ChartWrapper({
                            chartType: 'ColumnChart',
                            dataTable: data,
                            options: {'title': 'Estado de las Ordenes','width':400},
                            containerId: 'chart_div'
                        });
                        wrapper.draw();
                    
                        var table = new google.visualization.Table(document.getElementById('table_div'));
                        table.draw(dataTable, {showRowNumber: true}); 
                    }else{
                        alert('Reporte vacio para la consulta !!!')
                    }
                }
            }
        });
    });
</script>
<style>
    label.error {
        display: none;
        padding: 0;
        margin-left: 5px;
    }
</style>
<article class="module width_full">
    <header><h3>Reportes de Ordenes</h3></header>
    <div class="module_content">
        <div style="display: none;">
            <img id="calImg" src="<?php echo $this->baseUrl() . '/public/img/calendar-blue.gif' ?>" alt="Popup" class="trigger">
        </div>
        <div>
            <form method="get" id="formreport" name="formreport">
                <table>
                    <tr>
                        <td style="width: 265px">
                            <span>Desde</span>
                            <input type="text" id="from_date" name="from_date" style="width: 200px;"/>
                        </td>
                        <td style="width: 265px">
                            <span>Hasta</span>
                            <input type="text" id="to_date" name="to_date" style="width: 200px;"/>
                        </td>
                        <td style="width: 150px">
                            <select id="status" name="status">
                                <option value="0">Pendientes</option>
                                <option value="1">Progreso</option>
                                <option value="5">Completado</option>
                            </select>
                        </td>
                        <td>
                            <input type="submit" name="gen_report" id="gen_report" value="Generar Reporte"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div id="chart_div" style="width:500px; height:300px;"></div>
        <div id="table_div" style="width:400px;"></div>
    </div>
</article>

<script>
    $(function() {
        $('#from_date, #to_date').datepick({
            showOnFocus: false, 
            showTrigger: '#calImg',
            dateFormat: 'dd-mm-yyyy'
        });
    });
</script>